import 'package:flutter/material.dart';
import 'package:flutterdemo/utils/toast_util.dart';

class TextFieldWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new TextFieldState();
  }
}

class TextFieldState extends State<TextFieldWidget> {
  TextEditingController _usernameController = new TextEditingController();
  TextEditingController _passwordController = new TextEditingController();
  FocusNode _usernameFocusNode = new FocusNode();
  GlobalKey _formKey = new GlobalKey<FormState>();

  @override
  void initState() {
    super.initState();
    _passwordController.addListener(() {
      print(_passwordController.text);
      if (_passwordController.text.length > 0) {
        ToastUtil.showToastCenter(_passwordController.text);
      }
    });
    _usernameFocusNode.addListener(() {
      if (!_usernameFocusNode.hasFocus) {
        ToastUtil.showToastCenter("focus:${_usernameFocusNode.hasFocus}");
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("输入框和表单"),
      ),
      body: new Padding(
        padding: EdgeInsets.all(15),
        child: new Column(
          children: <Widget>[
            TextField(
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 20,
                color: Colors.red,
                height: 1.5,
              ),
              maxLength: 10,
              decoration: InputDecoration(
                labelText: "用户名",
                hintText: "用户名或邮箱",
                prefixIcon: Icon(Icons.person),
                suffixIcon: Icon(Icons.person_outline),
              ),
              onChanged: (value) {
                print("onChanged $value");
              },
              focusNode: _usernameFocusNode,
            ),
            TextField(
              textAlign: TextAlign.center,
              controller: _passwordController,
              autofocus: false,
              decoration: InputDecoration(
                labelText: "密码",
                hintText: "请输入密码",
                prefixIcon: Icon(Icons.lock),
              ),
            ),
            //表单
            Form(
              key: _formKey,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    autofocus: true,
                    controller: _usernameController,
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.green,
                    ),
                    decoration: InputDecoration(
                      labelText: "用户名",
                      hintText: "请输入用户名",
                      prefixIcon: Icon(Icons.person_outline),
                    ),
                    focusNode: _usernameFocusNode,
                    validator: (v) {
                      return v.trim().length > 0 ? null : "请输入用户名";
                    },
                  ),
                  TextFormField(
                    autofocus: false,
                    controller: _passwordController,
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.green,
                    ),
                    decoration: InputDecoration(
                      labelText: "密码",
                      hintText: "请输入密码",
                      prefixIcon: Icon(Icons.lock_outline),
                    ),
                    obscureText: true,
                    validator: (v) {
                      return v.trim().length > 0 ? null : "密码不能少于6位";
                    },
                  ),
                ],
              ),
            ),
            new Padding(
              padding: EdgeInsets.all(15),
              child: RaisedButton(
                child: Text("提交"),
                onPressed: () {
                  if ((_formKey.currentState as FormState).validate()) {
                    ToastUtil.showToastCenter("校验通过");
                  }
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
